import React, { Component } from 'react';
import { Scroller, Touchable, List } from '$yo-component';
import Header from '$component/header/index.js';
import Navbar from './../../component/navbar/index.js'
import ImgList from './../../component/imglist/index.js'
import axios from 'axios'
//import yoHistory from '$common/history';
//import Immutable from 'immutable';
import './index.scss';

class HomePage extends Component {
    constructor(props) {
        super(props);
        this.state={
            dataSource:[],
            page: 1,
            labelName:'',
            flag: false,
            stopFlag: true
        };
        this.modifyData=this.modifyData.bind(this);
        this.modifyPage=this.modifyPage.bind(this);
        this.modifyLabel=this.modifyLabel.bind(this);
        this.pageToOne=this.pageToOne.bind(this);
        this.handleFlag=this.handleFlag.bind(this)
    }

    modifyData(data){
        this.setState(()=>{
            return {
                dataSource: data
            }
        })
    }

    pageToOne(page){
        this.setState(()=>{
            return {
                page: page
            }
        })
    }

    modifyPage(page){
        this.setState(()=>{
            return {
                page:page
            }
        },()=>{
            //console.log(this.state.page)
            if(this.state.page!==1) {
                axios.get('http://127.0.0.1/api/book/search?page=' + this.state.page + '&limit=10&bookType=3&imageSize=big&label=' + this.state.labelName + '&destId=300679&q=&destType=1').then((response) => {
                    let res = response.data;
                    if (res.ret) {
                        let dataSource = res.data.list;
                        if (dataSource) {
                            let length = dataSource.length;
                            for (var i = 0; i < length; i++) {
                                dataSource[i].key = dataSource[i].id
                            }
                            this.setState((prevState) => {
                                return {
                                    dataSource: prevState.dataSource.concat(dataSource)
                                }
                            }, () => {
                                //console.log(this.state.dataSource)
                            });
                        } else {
                            this.setState(() => ({
                                stopFlag: false
                            }))
                        }
                    }
                    //console.log(res.data.list)
                })
            }else{
                return
            }
        })
    }

    modifyLabel(label){
        this.setState(()=>{
            return {
                labelName: label
            }
        })
    }

    handleFlag(flag){
        this.setState(()=>{
            return {
                flag: flag
            }
        })
    }


    render() {
        return (
            <div className="yo-flex">
                <Header title="聪游榜" left={true}/>
                <Navbar
                    modifyData={this.modifyData}
                    pageToOne={this.pageToOne}
                    modifyPage={this.modifyPage}
                    modifyLabel={this.modifyLabel}
                    handleFlag={this.handleFlag}
                />
                <ImgList
                    dataSource={this.state.dataSource}
                    pageNum={this.state.page}
                    modifyPage={this.modifyPage}
                    handleFlag={this.handleFlag}
                    flag={this.state.flag}
                    stopFlag={this.state.stopFlag}
                />
            </div>
        )
    }
    componentWillMount(){
        //console.log(this.state.page)
        axios.get('http://127.0.0.1/api/book/search?page='+this.state.page+'&limit=10&bookType=3&imageSize=big&label=&destId=300679&q=&destType=1').then((response)=>{
            let res=response.data;
            if(res.ret){
                let dataSource=res.data.list;
                if(dataSource.length){
                    this.setState(()=>{
                        let length=dataSource.length;
                        for(var i=0;i<length;i++){
                            dataSource[i].key = dataSource[i].id
                        }
                        return{
                            dataSource:dataSource
                        }
                    },()=>{
                       //console.log(this.state.dataSource)
                    });
                }
            }
            //console.log(res.data.list)
        })
    }
}

export default HomePage;
